{% extends "base.html" %}

{% block content %}
<div class="header-for-bg">
    <div class="background-header position-relative">
        <img src="/static/images/page-img/profile-bg2.jpg" class="img-fluid w-100 rounded rounded" alt="header-bg">
        <div class="title-on-header">
            <div class="data-block">
                <h2>Weather</h2>
            </div>
        </div>
    </div>
</div>
<!-- Page Content  -->
<div id="content-page" class="content-page">
            <div class="container">
               <div class="row">
                  <div class="col-lg-3">
                     <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                        <div class="iq-card-body">

                           <form method="post">
                              {{ form.hidden_tag() }}
                              <div class="form-group">
                                 <label for="country">Write Your City</label>
                                 {{form.city(class="form-control")}}
                              </div>

                              <div class="form-group">
                                 {{form.submit(type="submit", class="btn btn-primary d-block w-100")}}
                              </div>
                           </form>

                        </div>
                     </div>
                  </div>
                  <div class="col-lg-6">
                     <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                        <img src="/static/images/weather/weather2.jpg">
                     </div>
                  </div>
                  <div class="col-lg-3">
                     <div class="iq-card iq-card-block iq-card-stretch iq-card-height bg-primary rounded">
                        <div class="iq-card-body p-4">
                           <div class="text-center">
                              <!--
                              <div class="d-flex align-items-center justify-content-center">
                                 <i class="ri-cloud-line font-size-32"></i>
                                 <div class="text-left pl-3">
                                    <h6 class="text-white">USA</h6>
                                    <p class="mb-0">Lorem ipsum</p>
                                 </div>
                              </div>
                              <div class="main-temp">
                                 <h1 class="text-white">53 <span>°</span></h1>
                              </div>
                              <ul class="d-flex align-items-center justify-content-between list-inline m-0 p-0">
                                 <li>
                                    <p class="text-white mb-0">Yeasterday</p>
                                    <i class="ri-cloud-windy-line font-size-18"></i>
                                    <h6 class="text-white">21 <span>&#8451;</span></h6>
                                 </li>
                                 <li>
                                    <p class="text-white mb-0">Today</p>
                                    <i class="ri-showers-line font-size-18"></i>
                                    <h6 class="text-white">16 <span>&#8451;</span></h6>
                                 </li>
                                 <li>
                                    <p class="text-white mb-0">Tomorrow</p>
                                    <i class="ri-sun-cloudy-line font-size-18"></i>
                                    <h6 class="text-white">19 <span>&#8451;</span></h6>
                                 </li>
                              </ul>
                              -->
                              <p>The weather for today will be written here</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12">
                     <div class="iq-card">
                        <div class="iq-card-body bg-info rounded">
                           <!--
                           <ul class="iq-week-data d-flex justify-content-between list-inline m-0 p-0">
                              <li class="text-center p-4">
                                 <p class="mb-0">Sunday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-snowy-line"></i>
                                 </div>
                                 <h6>13 °  7 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Monday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-snowy-line"></i>
                                 </div>
                                 <h6>11 ° 6 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Tuesday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-sun-cloudy-line"></i>
                                 </div>
                                 <h6>12 °  8 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Wednesday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-showers-line"></i>
                                 </div>
                                 <h6>12 °  7 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Thursday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-sun-cloudy-line"></i>
                                 </div>
                                 <h6>11 °  6 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Fryday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-heavy-showers-line"></i>
                                 </div>
                                 <h6>11 °  8 °</h6>
                              </li>
                              <li class="text-center p-4">
                                 <p class="mb-0">Satuarday</p>
                                 <div class="weather-icon mt-3 mb-3 font-size-20">
                                    <i class="ri-sun-line"></i>
                                 </div>
                                 <h6>13 °  5 °</h6>
                              </li>
                           </ul>
                           -->
                           <p style="text-align: center;">The weather for this four days will be written here</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>

{% endblock %}